<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">

#detailpanel {
	position: fixed;
    width: 50vw;
    height: 33vh;
    right: 0;
    background-color: rgba(240, 248, 255, 0);
}
</style>
</head>
<body>
	<div id="detailpanel">
		<h6 id="detailtablename"></h6>
		<hr>
		<h6>查询条件字段</h6>
			<div id="querycolumn">
			</div>
		<hr>
		<h6>列表展示列字段</h6>
			<div id="listcolumn">
			</div>
		<hr>
		<input type="submit" value="保存" onclick="saveList()">
	</div>
	<div id="resultpanel">

	</div>

	<ul id="tablelist">
	</ul>
	<input type="submit" value="生成项目" onclick="gogenerate()">
</body>
<script type="text/javascript">
	var tablelist = {};
	var result = {};
	result.list=[];
	init();
	function init() {
		fetch('/table').then(response => response.json())
		  .then(data => {
			  for (e of data) {
				    //console.log(e);//输出 a,b,c
				    const name = e.name;
				    tablelist[name] = e;
				    const comment = e.comment;
				    const str = `<li>
			 			${name} ${comment}
			 			<input type="checkbox" name="backendsupport" alt="${name}" class="mcheck"/>后台
			 			<input type="checkbox" name="listsupport" alt="${name}" class="mcheck" /><span onclick="columnSetting('${name}')">列表</span>
					</li>`;
				    	document.getElementById('tablelist').innerHTML += str;
				}
		  }
		  ).catch(error => {
			    console.error('There has been a problem with your fetch operation:', error);
		  });
	}

	function columnSetting(tablename) {
		document.getElementById('querycolumn').innerHTML = '';
		document.getElementById('listcolumn').innerHTML = '';
		const str3 = `${tablename}生成配置<span id="dspan">${tablename}</span>`;
		document.getElementById('detailtablename').innerHTML = str3;
		//console.log(tablelist[tablename]);
		let fields = tablelist[tablename].fields;
		for(e of fields) {
			const name = e.propertyName;
			const str = `<input type="checkbox" name="querycolumn" alt="${name}" class="listcheck"/>${name}`;
			document.getElementById('querycolumn').innerHTML += str;
			const str2 = `<input type="checkbox" name="listcolumn" alt="${name}" class="listcheck"/>${name}`;
			document.getElementById('listcolumn').innerHTML += str2;
		}

	}

	function saveList() {
		var checkedBoxes = document.querySelectorAll('input[class=listcheck]:checked');
		console.log(checkedBoxes);
		let m = {};
		for(e of checkedBoxes) {
			const columnType = e.name;
			const moduleType = e.alt;
			if(m[columnType]){
				m[columnType].push(moduleType);
			}else{
				let modules = [];
				modules.push(moduleType);
				m[columnType] = modules;
			}
		}
		const tablename = document.getElementById('dspan').innerHTML;
		m.table = tablename;
		console.log(m);
		result.list.push(m);
	}

	function gogenerate() {
		var checkedBoxes = document.querySelectorAll('input[class=mcheck]:checked');
		console.log(checkedBoxes);
		let m = {};
		for(e of checkedBoxes) {
			const tablename = e.alt;
			const moduleType = e.name;
			if(m[tablename]){
				m[tablename].push(moduleType);
			}else{
				let modules = [];
				modules.push(moduleType);
				m[tablename] = modules;
			}
		}
		console.log(m);
/* 		fetch('/').then(response => response.json())
		  .then(data => {
				    console.log(data);//输出 a,b,c
		  }
		  ).catch(error => {
			    console.error('There has been a problem with your fetch operation:', error);
		  }); */
		result.table = m;
		console.log(result);
		fetch('/generate',{
			  method: 'POST', // or 'PUT'
			  headers: {
			    'Content-Type': 'application/json',
			  },
			  body: JSON.stringify(result),
			}).then(response => response.text())
		  .then(data => {
 				console.log(data);
		  }).catch(error => {
			    console.error('There has been a problem with your fetch operation:', error);
		  });
	}
</script>
</html>